import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

import { dominantfontSize, dominantHue, groupSpacing } from '../../config/style_variable';

module.exports = function Button({children}){
  return (
    <TouchableOpacity activeOpacity={0.7}>
      <View style={styles.button}>
        <Text style={styles.text}>{children}</Text>
      </View>
    </TouchableOpacity>
  )
};

let styles =  StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: groupSpacing,
    padding: 7,
    borderRadius: 25,
    backgroundColor: dominantHue,
  },
  text: {
    color: '#fff',
    fontSize: dominantfontSize,
  }
});
